<template>
  <div class="register">
    <div class="ding">
      <h3 style="margin: 0">注册</h3>
      <div style="margin: 0 0 4.3vh">
        还没有账号，立即<router-link class="zc" to="/login">登录</router-link>
      </div>
    </div>

    <van-field
      class="input input1"
      center
      v-model="tel"
      type="number"
      placeholder="请输入手机号"
    />

    <van-field
      class="input input3"
      v-model="number"
      type="number"
      center
      placeholder="请输入验证码"
    >
      <template #button>
        <van-button
          style="
            border: 0;
            border-radius: 50px;
            background: linear-gradient(266.23deg, #4960f7 0%, #6a97fa 100%);
          "
          size="small"
          type="primary"
          >获取验证码</van-button
        >
      </template>
    </van-field>

    <van-field
      class="input input2"
      v-model="password"
      center
      type="password"
      placeholder="请设置密码，6-25位"
    >
    </van-field>
    <div style="text-align: center">
      <van-button
        style="border-radius: 50px; width: 81.3vw; height: 5.5vh"
        color="linear-gradient(266.23deg, #4960F7 0%, #6A97FA 100%)"
        @click="dl">
        注册
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tel: "",
      number: "",
      password: "",
    };
  },
  methods:{
    dl(){
      if(/^1[3-9][\d]{9}$/.test(this.tel)){
        if(/^\w{6,12}$/.test(this.password)){
          if(/^\d{6}$/.test(this.number)){
          this.$router.push('/login',this.password)
          this.$toast.success('注册成功')
          }else{
            this.$toast.fail('验证码错误');
          }
        }else{
          this.$toast.fail('密码错误');
        }
      }else{
        this.$toast.fail('账号格式错误');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.register {
  .ding {
    width: 81.3vw;
    margin: 19vh auto 0;
    h3 {
      font-style: bold;
      font-size: 22px;
      color: #333333;
      text-align: left;
      padding: 0 10px 0;
    }

    div {
      font-style: normal;
      font-size: 12px;
      color: #333333;
      text-align: left;
      padding: 0 10px 0;
      .zc {
        color: #4960f7;
      }
    }
  }
  .input {
    border-radius: 50px;
    height: 5.5vh;
    width: 81.3vw;
    border: 1px solid #6a97fa;
    margin: 0 auto;
  }
  .input1 {
    margin: 0 auto 4.3vh;
  }
  .input2 {
    margin: 4.3vh auto 8.6vh;
  }
}
</style>
